{% extends 'admin/base.html' %}
{% load staticfiles %}
{% block content %}
    <style>
        .el-row {
            text-align: center
        }

        .el-button {
            padding: 12px 14px;
        }

        .el-image {
            width: 40px;
            height: 40px;
            position: absolute;
            margin-left: 25px;
        }

        .el-upload {
            width: 100px;
            float: left;
            margin-left: 5px;
        }
    </style>
    <div id="app">
        <el-form ref="form" :model="form" label-width="80px" style="width: 60%;">

            <el-form-item label="站点名称">
                <el-input v-model="form.web_name" placeholder="请输入站点名称" style="width: 50%;"></el-input>
            </el-form-item>

            <el-form-item label="站点副标">
                <el-input v-model="form.web_subtitle" placeholder="请输入站点副标题"></el-input>
            </el-form-item>

            <el-form-item label="站点域名">
                <el-input v-model="form.web_domain" placeholder="请输入站点域名" style="width: 50%;"></el-input>
            </el-form-item>

            <el-form-item label="站点LOGO">
                <el-input v-model="form.web_logo" placeholder="请输入站点LOGO" style="width: 80%;float: left;">
                </el-input>
                <el-button type="primary" icon="el-icon-upload" id="uploadBtn">点击上传</el-button>
                <el-image :src="form.web_logo"></el-image>
            </el-form-item>

            <el-form-item label="关键词">
                <el-input v-model="form.web_key" placeholder="请输入关键词" style="width: 80%;"></el-input>
            </el-form-item>

            <el-form-item label="站点简介">
                <el-input type="textarea" v-model="form.web_description" placeholder="请输入站点简介"></el-input>
            </el-form-item>

            <el-form-item label="统计代码">
                <el-input type="textarea" v-model="form.web_stat" placeholder="请输入统计代码"></el-input>
            </el-form-item>

            <el-form-item label="关站提示">
                <el-input v-model="form.web_close_tips" placeholder="请输入关站提示"></el-input>
            </el-form-item>

            <el-form-item label="版权信息">
                <el-input v-model="form.web_info_copyright" placeholder="请输入版权信息" style="width: 50%;"></el-input>
            </el-form-item>

            <el-form-item label="ICP备案">
                <el-input v-model="form.web_record" placeholder="请输入ICP备案" style="width: 50%;"></el-input>
            </el-form-item>

            <el-form-item label="公安备案">
                <el-input v-model="form.web_gongan" placeholder="请输入公安备案" style="width: 50%;"></el-input>
            </el-form-item>

            <el-form-item label="站长QQ">
                <el-input v-model="form.web_contact_qq" placeholder="请输入站长QQ" style="width: 50%;"></el-input>
            </el-form-item>

            <el-form-item label="站长Email">
                <el-input v-model="form.web_contact_email" placeholder="请输入站长Email" style="width: 50%;"></el-input>
            </el-form-item>

            <el-form-item label="站点状态">
                <el-radio-group v-model="form.web_on_off">
                    <el-radio label="1">开启网站</el-radio>
                    <el-radio label="2">关闭网站</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="评论权限">
                <el-radio-group v-model="form.web_content_on_off">
                    <el-tooltip class="item" effect="dark" content="所有用户均可评论" placement="right-start">
                        <el-radio label="2">开启(所有)评论</el-radio>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="所有用户均不可评论" placement="right">
                        <el-radio label="1">关闭(所有)评论</el-radio>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="普通用户不可评论" placement="right-end">
                        <el-radio label="3">仅VIP评论</el-radio>
                    </el-tooltip>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <el-row>
            <el-button type="primary" @click="submit()">提交保存</el-button>
{#            <el-button type="info" @click="form_reset()">取消重置</el-button>#}
        </el-row>
        <input type="file" accept="image/jpeg,image/gif,image/png,image/bmp" hidden name="file" onchange="_Upload_(this)" id="UploadFile">
    </div>
    <script src="{% static 'js/public.js' %}" type="text/javascript"></script>
    <script type="text/javascript">
        var Main = {
            data() {
                return {
                    form: {
                        uuid: '{{ data.uuid }}',
                        web_name: '{{ data.web_name }}',
                        web_subtitle: '{{ data.web_subtitle }}',
                        web_domain: '{{ data.web_domain }}',
                        web_logo: '{{ data.web_logo }}',
                        web_key: '{{ data.web_key }}',
                        web_description: '{{ data.web_description }}',
                        web_stat: '{{ data.web_stat }}',
                        web_close_tips: '{{ data.web_close_tips }}',
                        web_info_copyright: '{{ data.web_info_copyright }}',
                        web_record: '{{ data.web_record }}',
                        web_gongan: '{{ data.web_gongan }}',
                        web_contact_qq: '{{ data.web_contact_qq }}',
                        web_contact_email: '{{ data.web_contact_email }}',
                        web_on_off: '{{ data.web_on_off }}',
                        web_content_on_off: '{{ data.web_content_on_off }}',
                    }
                }
            }
            , methods: {
                submit: function () {
                    submit_ajax(this, 'POST', this.form)
                }
            }
        };
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app');

        function UploadFile(obj, url) {
            var formFile = new FormData();
            var fileObj = document.getElementById("UploadFile").files[0];
            formFile.append("file", fileObj);
            $.ajax({
                url: '"' + url + '"',
                data: formFile,
                type: "POST",
                dataType: "json",
                cache: false,//上传文件无需缓存
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false, //必须
                headers: {'X-CSRFToken': this.getCookie('csrftoken')},
                success: function (result) {
                    if (result.code === 0) {
                        alert('上传视频成功！');

                    } else {
                        alert('上传失败：' + result.msg)
                    }
                },
            })
        }
        function _Upload_(obj){
            url = "{% url 'admin_system:uploadFile' %}";
            res= _UploadFile(obj,url);
            console.log(res)
        }
    </script>
{% endblock %}